<template>
  <div class="box" :class="{ isAnimate: isAnimate }">{{ 1 + 1 }} : {{ a }} + {{ b }} = {{ c }}</div>
  <div class="container">
    <div class="c-1">
      <div class="c1-1">
        <div class="c11-1">1</div>
      </div>
      <div class="c1-2">
        <div class="c12-1">2</div>
      </div>
      <div class="c1-3">3</div>
    </div>
    <div class="c-2"></div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import { ref, computed, markRaw } from 'vue'
import viewer from './components/viewer.vue'
import viewer_api from './components/viewer_api.js'
export default {
  components: {
    viewer
  },
  data() {
    return {
      a: 1,
      b: 2,
      c: null,
      files: [],
      isAnimate: false,
      images: ['https://picsum.photos/200/200', 'https://picsum.photos/300/200', 'https://picsum.photos/250/200']
    }
  },
  methods: {
    add() {
      this.a++
      console.log(`helloworld`)
      this.isAnimate = !this.isAnimate
      viewer_api(this.images)
    }
  },
  mounted() {
    this.c = computed(() => {
      return this.a + this.b
    })
    console.log(999)
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transition: all 0.5s ease;
  &.isAnimate {
    transform: translate(100px, 0);
    background: grey;
  }
  &.isAnimate2 {
    animation: move 0.5s linear forwards alternate;
  }
}

@keyframes move {
  0% {
  }
  100% {
    transform: translate(100px, 0);
    background: grey;
  }
}
</style>
